<template>
<div>
    <div id='projectDetail' class="sidebar1">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#f2f2f2"
            text-color="black"
            active-text-color="#20a0ff"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index" >
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
                                    threeItem.title
                                }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
            
        </el-menu>
    </div>

    <div class="content-box1" :class="{'content-collapse':collapse}">
        <v-tags></v-tags>
        <div class="content1">
            <transition name="move" mode="out-in">
                <keep-alive :include="tagsList">
                    <router-view></router-view>
                </keep-alive>
            </transition>
            <!-- <el-backtop target=".content"></el-backtop> -->
        </div>
    </div>
</div>
</template>

<script>
import bus from '../../../common/bus';
import vTags from '../../../common/Tags_sub.vue';
export default {
    data() {
        return {
            collapse: false,
            pid:$('#idframe', window.parent.document).attr('data-id'),
            tagsList: [],
            items: [
                {
                    icon: 'el-icon-c-scale-to-original',
                    index: 'projectdetial',
                    title: '立项阶段项目信息录入',
                    subs: [
                        {
                            index: 'lx_info',
                            //pid:$('#idframe', window.parent.document).attr('data-id'), + {query: $('#idframe', window.parent.document).attr('data-id')}
                            title: '立项信息'
                        },{
                            index: 'lx_area_xm',
                            title: '立项项目范围'
                        },{
                            index: 'lx_area_xzgd',
                            title: '立项新增耕地范围'
                        },{
                            index: 'lx_area_xzst',
                            title: '立项新增水田范围'
                        },{
                            index: 'lx_area_mjdzb',
                            title: '开发前后地类面积对照表'
                        }
                    ]
                },
                {
                    icon: 'el-icon-folder-opened',
                    index: 'projectAtt',
                    title: '项目立项阶段材料上传',
                    subs: [
                        {
                            index: "lx_att_cbb",
                            title: '立项呈报表',
                        },{
                            index: 'lx_att_lxpf',
                            title: '立项批复文件'
                        },{
                            index: 'lx_att_xbys',
                            title: '项目预算表（工程量、单位、总价）'
                        },{
                            index: 'lx_att_zjps',
                            title: '专家评审意见'
                        },{
                            index: 'lx_att_lxqtdqs',
                            title: '立项前土地权属认定表'
                        },{
                            index: 'lx_att_cmdb',
                            title: '村民代表大会会议纪要'
                        },{
                            index: 'lx_att_xckc',
                            title: '项目立项前现场勘查意见'
                        },{
                            index: 'lx_att_xgbmyj',
                            title: '相关部门意见'
                        },{
                            index: 'lx_att_xmssqzp',
                            title: '项目实施前照片'
                        },{
                            index: 'lx_att_tdlyzgh',
                            title: '土地利用总体规划局部图'
                        },{
                            index: 'lx_att_tdzgh',
                            title: '土地整治规划局部图'
                        },{
                            index: 'lx_att_tdlyxz',
                            title: '土地利用现状局部图'
                        },{
                            index: 'lx_att_xmqyxz',
                            title: '项目区域现状实测图'
                        },{
                            index: 'lx_att_qt',
                            title: '其他'
                        }
                    ]
                },
                {
                    icon: 'el-icon-s-claim',
                    index: 'projectys',
                    title: '验收阶段项目信息录入',
                    subs: [
                        {
                            index: 'ys_jgxx',
                            title: '竣工信息',
                            
                        },{
                            index: 'ys_gdjzd',
                            title: '新增耕地界址点管理'
                        },{
                            index: 'ys_stjzd',
                            title: '新增水田界址点管理'
                        }
                    ]
                },
                {
                    icon: 'el-icon-video-camera',
                    index: 'projectYsAtt',
                    title: '验收阶段附件材料上传',
                    subs: [
                        {
                            index: 'ys_att_cbb',
                            title: '项目竣工验收呈报表'
                        },{
                            index: 'ys_att_pfwj',
                            title: '项目验收批复文件'
                        },{
                            index: 'ys_att_ssqqsrdb',
                            title: '项目实施前后分村面积及权属认定表'
                        },{
                            index: 'ys_att_dlczb',
                            title: '实施前后地类对照表'
                        },{
                            index: 'ys_att_ya_att_bgspb',
                            title: '项目规划计划变更审批表'
                        },{
                            index: 'ys_att_btlyb',
                            title: '项目表土再利用情况统计表'
                        },{
                            index: 'ys_att_gdzl',
                            title: '耕地质量等别评定报告'
                        },{
                            index: 'ys_att_xmgdzl',
                            title: '项目耕地质量等别数据'
                        },{
                            index: 'ys_att_ya_att_jlzj',
                            title: '监理总结报告'
                        },{
                            index: 'ys_att_ya_att_hqgz',
                            title: '项目后期耕作协议'
                        },{
                            index: 'ys_att_ya_att_xmsj',
                            title: '项目审计报告'
                        },{
                            index: 'ys_att_cwjs',
                            title: '财务结算报告'
                        },{
                            index: 'ys_att_sshzp',
                            title: '项目实施后照片'
                        },{
                            index: 'ys_att_jgyst',
                            title: '竣工验收实测图'
                        },{
                            index: 'ys_att_xmght',
                            title: '项目规划设计图'
                        },{
                            index: 'ys_att_xmwcqk',
                            title: '项目规划设计与实际完成情况对照表'
                        },{
                            index: 'ys_att_qt',
                            title: '其他及复核报告'
                        }
                    ]
                }
            ],
            
        };
    },
    components: {
        vTags
    },
    created() {
        //子菜单的文字设置为 padding-left:47px
        setTimeout(function () { setLiStyle() },10)
        //修改一级菜单的箭头方向并增加属性与单击事件
        setTimeout(function () { setClickAArrow() },10)
        // alert($('#idframe', window.parent.document).attr("data-id"))
        //通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('tags', msg => {
            let arr = [];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
                // console.log(arr)
            }
            this.tagsList = arr;
        });
        bus.$on('collapse', (msg) => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
        
    },
    methods: {
        handleOpen(key, keyPath){
            
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    }
};
function setLiStyle() {
    var obj = $('#projectDetail').find('.el-menu-item');
    if ($(obj[0]).css('padding-left') != '47'){
        for (var i = 0; i < obj.length; i++) {
            $(obj[i]).css('padding-left', '47px');
        }
    }else{
        setTimeout(function () { setLiStyle() },10);
    }
}
function setClickAArrow(){
    var obj = $('#projectDetail').find('.el-submenu__title');
    for(var i = 0; i < obj.length; i++){
        $(obj[i]).find('.el-submenu__icon-arrow').css('padding-top','6px')
    }
}

</script>

<style>

.content1{
    width: 100%;
    height: 95%;
    padding: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: white;
}
.content-box1{
    position: absolute;
    height: 100%;
    left: 20%;
    right: 0;
    top: 0px;
    bottom: 0;
    padding-bottom: 0px;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    background: white;
    overflow: auto;
}
.el-icon-ice-cream-square {
    background-image: url('../../../../assets/img/项目源.png') !important;
    background-size: 100% 100%;
}
.el-icon-ice-cream-square::before {
    visibility: hidden;
}
.el-icon-lollipop {
    background-image: url('../../../../assets/img/打卡监管.png') !important;
    background-size: 100% 100%;
}
.el-icon-lollipop::before {
    visibility: hidden;
}
.el-icon-potato-strips {
    background-image: url('../../../../assets/img/实时监控.png') !important;
    background-size: 100% 100%;
}
.el-icon-potato-strips::before {
    visibility: hidden;
}
.sidebar1-el-menu {
    background-color: #f2f2f2 !important;
}
.el-menu-item {
    background-color: #f2f2f2 !important;
}
.sidebar1 {
    width: 22%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
    float: left;
}
.sidebar1::-webkit-scrollbar {
    width: 0;
}
.sidebar1-el-menu:not(.el-menu--collapse) {
    width: 300px;
}
.sidebar1 > ul {
    height: 100%;
}
.el-menu-item.is-active {
    background-color: white !important;
}
.sidebar1 .el-icon-c-scale-to-original{
    background-image: url('../../../../assets/img/project_detail/menulx1.png') !important;
    background-size: 100% 100%;
    width:22px;
    font-size:22px;
}
.sidebar1 .el-icon-c-scale-to-original::before {
    visibility: hidden;
}
.sidebar1 .el-icon-folder-opened{
    background-image: url('../../../../assets/img/project_detail/menulx2.png') !important;
    background-size: 100% 100%;
    width:22px;
    font-size:22px;
}
.sidebar1 .el-icon-folder-opened::before {
    visibility: hidden;
}
.sidebar1 .el-icon-s-claim{
    background-image: url('../../../../assets/img/project_detail/menuys1.png') !important;
    background-size: 100% 100%;
    width:22px;
    font-size:22px;
}
.sidebar1 .el-icon-s-claim::before {
    visibility: hidden;
}
.sidebar1 .el-icon-video-camera{
    background-image: url('../../../../assets/img/project_detail/menuys2.png') !important;
    background-size: 100% 100%;
    width:22px;
    font-size:22px;
}
.sidebar1 .el-icon-video-camera::before {
    visibility: hidden;
}

.el-submenu__title {
    background-color: #f2f2f2 !important;
    height:30px;
    line-height: 30px;
    font-size:15px;
    font-family: '微软雅黑';
}
.el-submenu .el-menu-item {
    height: 25px;
    line-height: 25px;
    font-size:15px;
    font-family: '微软雅黑';
}
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(-90deg); 
	-ms-transform: rotate(-90deg);
	transform: rotateZ(-90deg); 
}
/*菜单展开*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(0deg); 
	-ms-transform: rotate(0deg);
	transform: rotateZ(0deg); 
}
</style>